<template>
  <div id="apply" class='app apply' v-loading="loading">
      
    <router-view/>
    <div class="container">
        <div class='login'>
           
            <div class="mod3">
                <div class="layer1">
                    <div class="word4">
                        <span>
                            {{title}}
                        </span>
                    </div>
                    <div class="mod4" id="errormsg"></div>
                    
                    <div class="mod5">
                       
                         <el-input type="text" id="account" name="account" v-model="account" placeholder="账号" autocomplete="off" autofocus required oninvalid="setCustomValidity('用户名不能为空，请输入')" oninput="setCustomValidity('')" @focus="focuss" prefix-icon="el-icon-s-custom" style='width:98%'></el-input>
                    </div>
                    <div class="mod6"></div>
                    <div class="mod7">
                        
                        <el-input type="password" id="password" name="password" v-model="password" placeholder="密码" autocomplete="off" required oninvalid="setCustomValidity('密码不能为空，请输入')" oninput="setCustomValidity('')"  @focus="focuss" prefix-icon="el-icon-lock" style='width:98%'></el-input>
                    </div>

                    <div class="mod8"></div>
                    <div class="mod9">
                         <el-button type="primary" style="width:80%" @click="login">登录</el-button>
                    </div>
                </div>
            </div>
        </div>
      
    </div>

  </div>
  
        
</template>
<script>
import Vue  from 'vue'
import '../../assets/css/common.css'
import getUserIP from '../../utils/utils'
export default {
  name: 'Home',
  components: {
   
  },
  data(){
      return {
         ipsssss:'',
         isLocalhost:'N',
         //account:'ysx',
         //password:'123456',
         account:'',
         password:'',
         loading:true,
         isApp:"N",
         filenames:'',
         company:"",
         sCode:"ysx",
         title:localStorage.getItem("title")
      }
  },
  beforeCreate(){
      
  },
  mounted(){
    
  },
  created(){
    const originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
    if(this.$route.query.isLocalhost){
        this.isLocalhost=this.$route.query.isLocalhost;
    }
    if(this.$route.query.account){
        this.account=this.$route.query.account;
    }
    if(this.$route.query.password){
        this.password=this.$route.query.password;
    }
    if(this.$route.query.exurl){
        let exurl=this.$route.query.exurl;
        this.$router.push({path:exurl});
    }
    //alert(this.$route.query.title);
    if(this.$route.query.title){
        localStorage.setItem("title",this.$route.query.title);
        this.title=this.$route.query.title;
    }else{
        this.title=localStorage.getItem("company");
    }
     if(this.$route.query.msg){
        localStorage.setItem("osmsg",this.$route.query.msg)
    }
    if(this.$route.query.isApp){
        this.isApp=this.$route.query.isApp
    }
    if(this.$route.query.sCode){
        this.sCode=this.$route.query.sCode
        localStorage.setItem("sCode",this.sCode)
    }
    
    localStorage.setItem("sCode",this.sCode)
     if(this.$route.query.company){
        this.company=this.$route.query.company
    }
    if(this.$route.query.filenames){
        this.filenames=this.$route.query.filenames
    }
    document.title=this.title; 
    window.onresize = ()=>{
        return(()=>{
                    //键盘弹起与隐藏都会引起窗口的高度发生变化
        const resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
        
        if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
          window.setTimeout(function () {
            document.activeElement.scrollIntoViewIfNeeded()
          }, 0)
        }

        if(resizeHeight-0<originalHeight-0){
        //当软键盘弹起，在此处操作
            console.log("进入到软键盘弹起=========");
            //alert("进入到软键盘弹起=========")
            document.querySelector('body').setAttribute('style', 'height:'+originalHeight+'px;');
            this.scrollerHeight=resizeHeight;
            
        }else{
            //当软键盘收起，在此处操作
            console.log("进入到软键盘收起=========");
            document.querySelector('body').setAttribute('style', 'height:100%;');
            this.scrollerHeight="100%";
            
        }
        })()
            
    }
    this.login();
    
  },
  mounted(){
      this.loading=false;
  },
  methods:{
    focuss(event){
       
       
    },
    login(){
       
       if(this.account==""){
            document.getElementById("errormsg").innerHTML="请输入账号!";
            return;
          
       }
       if(this.password==""){
            document.getElementById("errormsg").innerHTML="请输入密码!";
            return;
       }
      
        this.loading=true;
        let sef=this;
       
        localStorage.setItem("imgytjIp","http://8.136.193.200:8888");
        localStorage.setItem("imgIp","http://jsweixin.tianxunwang.com");
        
        this.$post('api','api/login/checkLogin',
          {
              account:escape(this.account),
              password:escape(this.password),
              company:escape(this.company),
              sCode:this.sCode,
              isApp:this.isApp
          }
         //   headers:
//            {'Content-Type': 'application/json' }

        ).then(data=>{
            let ips=data[0].ip;
            data=data[0].data;
            localStorage.setItem("ips",JSON.stringify(ips));
            console.log("ips====="+ips);
            this.loading=false;
            if(data[0].status=="err"){
                 document.getElementById("errormsg").innerHTML=unescape(data[0].msg+"！")
            }else{
                let token=data[0].token;
                let company=data[0].company;
                let username=data[0].username;
                let userId=data[0].userId;
                let name=data[0].name;
                let url=data[0].url;
                sessionStorage.setItem("token",token);
                localStorage.setItem("company",company);
                localStorage.setItem("username",username);
                localStorage.setItem("userId",userId);

                this.$router.push({path:url});
            }
        });
    }

  }
}
</script>
<style scoped>
    .focusState {position: absolute;}
    .app{
        height:100%;
        width:100%;
        background:url('../../assets/img/bg/bg6.png') no-repeat;
        background-size: 100% 100%;
        display:flex;
        flex-direction: column;
    }
    .container{
        width:100%;
        height:100%;
        text-align:center;
        flex:1;
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items:center;
    }
    body {
        margin: 0;
      }
      ::-webkit-scrollbar {
        display: none;
      }
     
    .login{
        width:80%;
        height:70%;
        display:flex;
        flex-direction: row;
        background-color:rgba(0, 3, 12,0.46);
        border-radius: 7px;
        align-items: flex-start;

    }
    .group1{
        text-align: left;
        padding:20px;
    }
    .group1 img{
        width:38px;
        float:left;
    }
    .group1 span{
        color:#fff;
        margin-left:10px;
        font-family: PingFangSC-Regular, PingFang SC;
        line-height: 32px;
        font-size:25px;
    }
    .mod2{
        height:100%;
        flex:1;
    }
    .mod3{
        width:100%;
        height:100%;
        background:#fff;
        border-radius:6px;
    }
    .outer1{
        position:relative;
        height:100%;
        
    }
    .bottom{
        position: absolute;
        bottom: 0;
        text-align:left;
        padding:15px;
        color:#fff;
    }
    .word3{
        font-size:22px;
    }
    .txt1{
        font-size:22px;
    }
    .info1{
        font-size:12px;
        margin-top:15px;
    }
    .mod4{
        height:60px;
        color:red;
        line-height:60px;
    }
    .word4{
        color:#405A77;
        margin-top:25%;
       
    }
    .word4 span{
        border-bottom: 2px solid #405A77;
    }
    .mod5{
        text-align: left;
        width:80%;
        margin-left:10%;
        color:#405A77;
    }
    .mod6{
        height:30px;
    }
     .mod7{
        text-align: left;
        width:80%;
        margin-left:10%;
        color:#405A77;
    }
    .mod8{
        height:20px;
    }
    
</style>
